<template>
  <div class="container page">


    <!-- <p style="margin:20rpx;">建议使用常用手机号</p>
  
    <input type="text" style="border: 1px solid #ddd;margin:20rpx;" placeholder="手机号" v-model="form.username">

    <div class="col-12">
        <button v-if="gvbtn" @click="submitone" class="btn btn-primary col-12">获取图形校验码</button>
        <button v-else @click="submitone" class="btn btn-warning col-12">刷新图形校验码</button>
    </div>

    <img v-if="two" style="width:220rpx;height:80rpx;" :src="gvimg" />
    <input v-if="two" type="text" style="border: 1px solid #ddd;margin:20rpx;" placeholder="输入4位图形验证码" v-model="form.gvcode">

      <div class="col-12">
        <button v-if="!gvbtn&&canClick" @click="submittwo" class="btn btn-primary col-12" style="margin-top:15px">获取短信验证码</button>
        <button v-if="!gvbtn&&!canClick" @click="submittwo" class="btn btn-primary col-12" style="margin-top:15px">{{totalTime}}秒后可再次获取短信验证码</button>
      </div>

        <div  v-if="three" class="col-12"  style="margin-top:15px">
          <input  type="text"  placeholder="请输入短信验证码" v-model="form.smscode">
        </div>

        <div v-if="three" class="col-12"  style="margin-top:15px">
          <input  type="password"  placeholder="请输入密码" v-model="form.password">
        </div>

      <div class="col-12">
        <button v-if="three" @click="submitthree" class="btn btn-primary col-12" style="margin-top:15px">注册</button>
      </div> -->


    <!-- <div class="one">
        <ul><img src="https://www.hatchdo.com/wxmini/Register/dingzhi.png" class="tp"></ul>
    </div> -->
    <div style="margin:20rpx;text-align:right" @click="goLogin">
      <p>已有账号,请登录</p>
    </div>

    <div class="back">
        <ul>&nbsp;</ul>
        <ul class="txx"><img :src="userinfo.avatarUrl" class="tx"></ul>
        <ul class="nk">{{userinfo.nickName}}</ul>
    </div>
    <div class="two">
        <ul class="zt"><p style="vertical-align:middle;">手机号</p></ul>
        <ul class="zt" ><p><input type="text" placeholder="建议常用手机号" class="yzm" v-model="form.username"/></p></ul>
        <ul class="zt" >
         <p v-if="gvbtn" @click="submitone">获取图形校验码</p>
         <p v-else @click="submitone">刷新图形校验码</p>
        </ul>
    </div>
    <div v-if="two" style="text-align:center;margin-top: 50rpx;">
        <img style="width:220rpx;height:80rpx;" :src="gvimg" />
    </div>

    <div class="two" v-if="two">
        <ul class="zt"><p>图形验证码</p></ul>
        <ul class="zt" ><p><input type="text" class="yzm" placeholder="输入图形验证码" v-model="form.gvcode"/></p></ul>
        <ul class="zt">
        <p v-if="!gvbtn&&canClick" @click="submittwo">获取短信验证码</p>
        <p v-if="!gvbtn&&!canClick" @click="submittwo">{{totalTime}}秒</p>
        </ul>
    </div>

    <div class="two" v-if="three">
        <ul class="zt"><p>短信验证码</p></ul>
        <ul class="zt" ><p><input type="text" class="yzm" placeholder="请输入短信验证码" v-model="form.smscode" /></p></ul>
        <ul class="zt"><p></p></ul>
    </div>
    <div class="two" v-if="three">
        <ul class="zt"><p>密码</p></ul>
        <ul class="zt" ><p><input type="password"  placeholder="请输入8-15位密码" v-model="form.password" class="yzm" /></p></ul>
        <ul class="zt"><p></p></ul>
    </div>

    <!-- <div>
        <ul class="button" v-if="three" @click="submitthree">
            <input type="button" value="注册" class="bk"/>
        </ul>
    </div> -->
<p v-if="three" style="background-color:#ddd;color:#000;margin:0 250rpx;margin-top: 60rpx;height: 60rpx;line-height: 60rpx;text-align:center" @click="submitthree">注册</p>

  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')
import qcloud from 'wafer2-client-sdk'
 
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
 
  data () {
    return {
      form: {"username":"","password":"","gvcode":"","smscode":""},
      gvimg: '',
      two: false,
      totalTime: 60,
      gvbtn: true,
      three: false,
      canClick: true,
      userinfo: {},
      tabA: 0,
      productList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    // this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `为女性恢复年轻及孩子健康成长提供一站式解决方案。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
      goLogin(){
        wx.navigateTo({
          url: `/pages/me/main`
        })
      },
      test(){
        //   console.log("111111111111")
        wx.switchTab({
            url: `/pages/usercenter/main`
        })
      },
      submitthree() {
        post(`geweb/signup`, this.form, {})
        .then(result => {
            wx.showToast({
                title: result.message,
                icon: 'none'
            })
            if (result.code === 200) {
                  this.two = false;
                  this.three = false;
                  post(`geweb/id?id=${wx.getStorageSync('scene').split("shareid=")[1]}&num=${this.form.username}`, {}, {})

                  
                  setTimeout(() => {
                    // wx.switchTab({
                    //     url: `/pages/usercenter/main`
                    // })
                    wx.navigateTo({
                        url: `/pages/me/main`
                    })
                  }, 1000);
            }
    
    
        })
      },
      submittwo(){
        if (!this.canClick) return
        post(`geweb/smsSignup/send`, this.form, {})
        .then(result => {
          wx.showToast({
            title: result.message,
            icon: 'none'
          })

          if (result.code === 200) {
                this.three = true

                this.canClick = false
                let clock = setInterval(() => {
                  this.totalTime--
                  if (this.totalTime < 0) {
                  clearInterval(clock)
                  this.totalTime = 60
                  this.canClick = true  //这里重新开启
                  }
                }, 1000)

          }
        })
      },
      submitone() {
        this.gvimg = ''
     post(`geweb/gvcode/getcode`, {"username":this.form.username}, {})
      .then(result => {
          wx.showToast({
            title: result.message,
            icon: 'none'
          })
          if (result.code === 200) {
                // console.log(result)
                // console.log(config.hosta)
                this.two = true
                this.gvbtn = false
                this.gvimg = `${config.hosta}geweb/gvcode/img?username=${this.form.username}`
                // console.log(this.gvimg)
          }
 
 
      })
      },
    login() {
      post(`geweb/login`, {"username":this.username,"password":this.password}, {})
      .then(result => {
        wx.setStorageSync('user', result.res)
        wx.setStorageSync('token', result.token)

          wx.showToast({
            title: '登录成功',
            icon: 'none'
          })

    setTimeout(() => {
        wx.switchTab({
          url: `/pages/usercenter/main`
        })

    }, 1000)
 
      })
    },
    chooseTab(x) {
      this.tabA = x;
      if(x === 0) {
        this.get_product("");
      } else {
        this.get_product(x);
      }
    },
    async get_product(categoryId) {
      return await get(`geweb/product/get_productlist?categoryId=${categoryId}`, {}).then(result => {
        console.log(result.res)
        this.productList = result.res;
      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }

  },
  onShow () {
      if(wx.getStorageSync('userinfo')) {
        this.userinfo = JSON.parse(wx.getStorageSync('userinfo').rawData)
      }
      this.form.username = ""
      this.gvbtn = true
      this.two = false
      this.three = false
      this.canClick = true
    //   this.submitone()
    // this.get_product("")
  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;  
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}

.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}



.one{
    // display: flex;
}
.two{
  display: flex;
}
.tp{
    width: 100%;
    height: 350rpx;
}
.zt{
    flex: 1;
    // background: #C8D3D1;
    margin-top: 50rpx;
    text-align: center;
	  height:60rpx;
    line-height: 60rpx;
}
.tt{
display: table-cell;
    vertical-align:middle;
}
.button{
	flex:1;
    text-align: center;
    margin-top: 100rpx;
}
.yzm{
	// border-radius:10rpx;
	height:60rpx;
	// line-height:50rpx;
  // margin: 15rpx;
  // background-color: #ffffff
  background-color: #e6e6e6;
}
.bk{
	height:60rpx;
	line-height:60rpx;
	width:160rpx;
	font-weight:bold;
}
.dl{
	height:60rpx;
	line-height:60rpx;
	width:160rpx;
	color:#ffffff;
	background:#000000;
	font-weight:bold;
}
.back{
  margin-top: 100rpx;
}
.tp{
    width: 100%;
    height: 350rpx;
}
.txx{
    text-align: center;
}
.nk{
    text-align: center;
    margin-bottom: 1rem;
}
.tx{
    width: 60px;
    height: 60px;
    text-align: center;
    /* margin-top: 1rem;  */
    border-radius: 30px;  
}
</style>
